<template>
    <div style="height: 100%" class="km-center">

        <div ref="mainAD" class="km-full" >
            <mt-swipe :auto="5000" style="height: 100%">

                <mt-swipe-item v-for="(item,index) in p_ads" :key="index" style="height: 100%">
                    <div @click="onClickAd(' ',item,false)" class="km-center"
                         style="width: 100%; height: 100%;overflow: hidden;">
                        <img :src=item
                             style="width: 100%;height:auto;">
                    </div>
                </mt-swipe-item>

            </mt-swipe>
        </div>

    </div>

</template>

<script>
    import Vue from 'vue'
    import {Swipe, SwipeItem} from 'mint-ui'

    import mixinPage from "../mixinPage";

    var components = {};

    components[Swipe.name] = Swipe;
    components[SwipeItem.name] = SwipeItem;

    export default {
        name: "page-home",
        components: components,
        mixins: [mixinPage],
        data() {
            return {

                p_ads: [
                    // "http://thh.satrace.cn/upload/201802/02/201802021119311627.jpg",
                    "http://tth.mark.satrace.cn/images/20190910175854.jpg",
                    "http://thh.satrace.cn//upload/201802/01/201802011200023988.jpg",
                    "http://thh.satrace.cn/upload/201710/24/201710241733380750.jpg",
                    "http://thh.satrace.cn/upload/201710/24/201710241733254813.jpg",
                    "http://thh.satrace.cn/upload/201710/24/201710241733132826.jpg",
                    "http://thh.satrace.cn/upload/201710/24/201710241732431559.jpg",

                ],

                p_indicatorCount: 0,//打开indicator的次数

            }
        },
        mounted: function () {


            //region 保证图片能完全显示
            let height = (parseInt(this.$refs.mainAD.clientWidth) * (768 / 1280))
            let width=document.body.clientWidth;

            if(height>document.body.clientHeight){
                 height=document.body.clientHeight
            }
            let holdwidth=(parseInt(height) * (  1280/768));
            if(width>holdwidth){
                width=holdwidth;
            }

            this.$refs.mainAD.style.height=height+ "px";
            this.$refs.mainAD.style.width=width+ "px";
            //endregion


            document.addEventListener('onGetConfige', function (event) {
                let data=event.data;
                //接受到数据
                console.log(data);
            });
        },

        //这个时候mixin没生效的在"create"的时候才有
        beforeCreate: function () {


        },


        methods: {
            // indicatorOpen() {
            //     if (this.p_indicatorCount == 0) {
            //         uiHelp.indicatorOpen();
            //     }
            //     this.p_indicatorCount++;
            // },
            // indicatorClose() {
            //     this.p_indicatorCount--;
            //     if (this.p_indicatorCount == 0) {
            //         uiHelp.indicatorClose();
            //     }
            // },
            onClickAd(title, url, isGoOut) {


            },


        },

    }
</script>


<style lang="less" scoped>
    /*@import "~jfxh5/dist/less/style.less";*/


</style>
<style scoped>
    /deep/ .mint-header-button {
        height: 100%;
    }
</style>
